<template>
  <div class="scroll">
    <div class="item" v-for="item in friendAvatar">
      <div>
        <van-image v-if="isRadius" width="50px" radius="6" height="50px" fit="cover" :src="item.avatarUrl" />
        <van-image v-else width="50px" height="50px" round fit="cover" :src="item.avatarUrl" />
        <div class="item-user-name">{{ item.userName }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps } from 'vue';

// 父组件传值
let props = defineProps({
  friendAvatar: Object,
  isRadius: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.scroll {
  padding: 10px 12px 10px 12px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  border-bottom: 3px solid #f2f3f5;
  background-color: #fff;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.item {
  margin-right: 15px;
  white-space: nowrap;
  display: inline-block;
}

.item div {
  text-align: center;
}

.item-user-name {
  margin-top: 5px;
  font-size: 12px;
  color: #323233;
}
</style>
